<!DOCTYPE html>
<html>
<head>
    <title>Python Getting Started on Heroku</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
    {#    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>#}
    <script src="https://cdn.staticfile.org/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <style type="text/css">
        .div-center {
            background: #9B7CBE;
            color: white;
            padding-bottom: 80px
        }

        .div-center .btn-primary {
            background: #845ac7;
            border-color: #845ac7
        }

        .div-center .btn-primary:hover {
            background: #7646c1
        }

        .div-center p {
            color: #d9ccee;
            max-width: 75%;
            margin: 1em auto 2em
        }

        .navbar + .div-center {
            margin-top: -20px
        }

        .div-center .lang-logo {
            display: block;
            background: #b01302;
            border-radius: 50%;
            overflow: hidden;
            width: 100px;
            height: 100px;
            margin: auto;
            border: 2px solid white
        }

        .div-center .lang-logo img {
            max-width: 100%
        }

    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            {% block nav %}
                <li class="active">
                    <a href="/"><span class="glyphicon glyphicon-home"></span> Home</a>
                </li>
                <li>
                    <a href="/db"><span class="glyphicon glyphicon-search"></span> db</a>
                </li>
            {% endblock %}
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="navbar-right">
                <a href="https://www.heroku.com"><span class="glyphicon glyphicon-book"></span> heroku</a>
            </li>
        </ul>
    </div>
</nav>

{% block content %}{% endblock %}

</body>
</html>
